<template>
	<view>
		<view>
			<view>
				<slot>
					<view>
						<view class="image-wrap" v-if="count==1">
							<!-- <view class="image" v-if="value&&isUpdate==1">
								<u--image @tap='openSheet()' width="100%" height="360rpx" :src="value"></u--image>
							</view> -->
							<view class="image" >
								<u--image v-if="firstPic" width="100%" height="360rpx" :src="firstPic"
									@click="previewImgSingle(firstPic)"></u--image>
								<u--image @tap='openSheet()' v-else-if="coverPic" width="100%" height="360rpx"
									:src="coverPic"></u--image>
								<u--image @tap='openSheet()' v-else width="150rpx" height="150rpx"
									:src="defaultPic"></u--image>
							</view>
							<view class="overlay" v-if="firstPic">
								<view class="flex">
									<view @click="previewImgSingle(firstPic)" class="p-3"><u--image width="72rpx"
											height="72rpx" src='/static/images/ui/verify/add.png'></u--image></view>
									<view @click="removePic(0)" class="p-3"><u--image width="72rpx" height="72rpx"
											src='/static/images/ui/verify/delete.png'></u--image></view>
								</view>
							</view>
						</view>
						<view v-else class="flex" style="flex-wrap: wrap;gap:18rpx 18rpx;">
							<view class="image-wrap" v-for="pic,idx in picList" :key="idx">
								<view class="image">
									<u--image width="150rpx" height="150rpx" :src="pic">
									</u--image>
								</view>
								<view class="overlay">
									<view class="flex">
										<view @click="previewImg(idx)" class="p-2"><u--image width="36rpx"
												height="36rpx" src='/static/images/ui/verify/add.png'></u--image></view>
										<view @click="removePic(idx)" class="p-2"><u--image width="36rpx" height="36rpx"
												src='/static/images/ui/verify/delete.png'></u--image></view>
									</view>
								</view>
							</view>
							<u--image width="150rpx" height="150rpx" :src="defaultPic" @tap='openSheet()'></u--image>
						</view>
					</view>
				</slot>
			</view>
		</view>
		<u-action-sheet :actions="sheets" :closeOnClickOverlay="true" :closeOnClickAction="true" @select="selectSheet"
			@close="closeSheet" title="选择" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	import {
		props
	} from "../../uni_modules/uview-ui/libs/mixin/mixin";
	import upload from "@/utils/upload.js"
	export default {
		name: "bg-upload",
		props: {
			"work": {
				default: true
			},
			"count": Number,
			"coverPic": String,
			"propPic": {
				default: () => ([])
			},
			"value": String,
			"propValue": String,
			"isUpdate": String,
			"defaultPic": {
				type:String,
				default: '/static/images/ui/edu/select-user.png'
			},
		},
		data() {
			return {
				show: false,
				showCover: false,
				// defaultPic: '/static/images/ui/edu/select-user.png',
				// defaultPic: '/static/images/ui/edu/selectImg2.png',
				fileList: [],
				picList: [],
				sheets: [{
						id: 1,
						name: '拍照',
						color: '#333333',
						fontSize: '20'
					},
					{
						id: 2,
						name: '相册',
						color: '#333333',
						fontSize: '20'
					}
				]
			};
		},
		computed: {
			firstPic() {
				console.log('props.value:', props.value)
				console.log('📸 当前 firstPic:', this.picList[0])
				return this.picList.length > 0 ? this.picList[0] : ''
			}
		},
		methods: {
			previewImgSingle(url) {
				uni.previewImage({
					current: 0,
					urls: [url],
				});
			},
			previewImg(idx) {
				uni.previewImage({
					current: idx,
					urls: this.picList,
				});
			},
			openCover() {
				this.showCover = true
			},
			openSheet() {
				this.show = true;
			},
			closeSheet() {
				this.show = false;
			},
			selectSheet(index) {
				this.show = false;
				if (index.id == 1) {
					this.chooseImage('camera')
				} else if (index.id == 2) {
					this.chooseImage('album')
				} else {
					this.chooseYun()
				}
			},
			removePic(idx, imgSrc, imgList) {
				this.fileList.splice(idx, 1)
				this.picList.splice(idx, 1)

				this.$emit("update:value", this.fileList.map(f => f.fileName).join(','))
				this.$emit("uploadSuccess", this.fileList)
			},
			chooseImage(source) {
				uni.chooseImage({
					count: this.count, //最多可以选择的图片张数
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: [source], //album 从相册选图，camera 使用相机，默认二者都有
					success: (res) => {
						const images = res.tempFilePaths;
						images.forEach(img => {
							upload({
								filePath: img
							}).then(res => {
								if (res.code == 200) {
									if (this.count > 1) {
										this.fileList.push(res.data)
										this.picList.push(res.data.url)
									} else {
										this.fileList = [res.data]
										this.picList = [res.data.url]
									}

									if (this.count == 1) {

										this.$emit("update:value", this.fileList[0].fileName)
										this.$emit("uploadSuccess", this.fileList)

									} else {
										this.$emit("update:value", this.fileList.map(f => f
											.fileName).join(','))
										this.$emit("uploadSuccess", this.fileList)

									}
								}
							})
						})
					}
				});
			},
			makePicList() {
				if (this.count > 1) {

					let _list = this.fileList.map(f => f.url)
					_list.forEach(i => {
						if (i) {
							this.picList.push(i)
						}
					})
				} else {
					this.picList = [this.fileList[0].url]
				}

			}
		},
		watch: {
			propPic: {
				deep: true,
				immediate: true,
				handler(newVal, oldVa) {
					console.log('propPic', newVal, oldVa);
					newVal.forEach(i => {
						this.picList.push(i)
					})
				}
			},
			propValue: function(newVal, oldVal) {
				console.log('propValue', newVal, oldVal);
				if (newVal) {
					let _imgs = newVal.split(",")
					_imgs.forEach(img => {
						this.fileList.push({
							fileName: img
						})
					})
				}
			}
		}
	}
</script>

<style>
	.image-wrap {
		position: relative;
	}

	.image-wrap .overlay {
		position: absolute;
		background-color: #1d2129;
		opacity: 0.5;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>